<!DOCTYPE html>
<html lang="zh-CN">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>文章标题 - 我的个人博客</title>
   <link rel="stylesheet" href="css/style.css" />
 </head>
 <body>
   <header class="header">
     <div class="container">
       <h1 class="logo">我的博客</h1>
       <nav class="main-nav">
         <ul>
           <li><a href="index.html">首页</a></li>
           <li><a href="about.html">关于我</a></li>
           <li><a href="#contact">联系我</a></li>
         </ul>
       </nav>
     </div>
   </header>
 
   <div class="container article-container">
     <article class="article-content">
       <header>
         <h1>HTML5新特性探索</h1>
         <div class="article-meta">
           <span class="author">作者: 张三</span>
           <span class="date">发布时间: 2023年5月15日</span>
           <span class="category">分类: 前端开发</span>
         </div>
       </header>

       <img src="./img/html.png" alt="HTML5" class="featured-image" />

        <div class="article-body">
         <p>

         </p>

         <h2>语义化标签</h2>
         <p>
           
           &lt;article&gt;,
           &lt;section&gt;等，这些标签让网页结构更加清晰，也便于搜索引擎理解网页内容。
         </p>

         <h2>多媒体支持</h2>
         <p>

         </p>

          <pre><code>&lt;video width="320" height="240" controls&gt;
    &lt;source src="movie.mp4" type="video/mp4"&gt;
    &lt;source src="movie.ogg" type="video/ogg"&gt;
    您的浏览器不支持HTML5视频标签。
&lt;/video&gt;</code></pre>

        <h2>Canvas绘图</h2>
        <p>
        </p>

        <h2>本地存储</h2>
          <p>

          </p>
        </div>

        <footer class="article-footer">
         <div class="tags">
           <span>标签: </span>
           <a href="#">HTML5</a>, <a href="#">前端开发</a>,
           <a href="#">Web技术</a>
         </div>
       </footer>
     </article>

     <section class="comments-section">
       <h2>评论</h2>
 
       <div id="comments-list">
         <div class="comment">
           <div class="comment-author">
             <img src="./img/avatar-02.png" alt="用户头像" />
             <span>李四</span>
           </div>
           <div class="comment-content">
             <p>这篇文章写得很好，对HTML5的新特性介绍得很全面！</p>
             <div class="comment-meta">2023年5月16日</div>
           </div>
         </div>

         <div class="comment">
           <div class="comment-author">
             <img src="./img/avatar-03.png" alt="用户头像" />
             <span>王五</span>
           </div>
           <div class="comment-content">
             <p>Canvas部分可以再详细一些，期待后续文章！</p>
             <div class="comment-meta">2023年5月17日</div>
           </div>
         </div>
       </div>

       <form id="comment-form" class="comment-form">
         <h3>发表评论</h3>
         <div class="form-group">
           <label for="name">姓名:</label>
           <input type="text" id="name" name="name" required />
         </div>
         <div class="form-group">
           <label for="email">邮箱:</label>
           <input type="email" id="email" name="email" required />
         </div>
         <div class="form-group">
           <label for="comment">评论:</label>
           <textarea id="comment" name="comment" rows="5" required></textarea>
         </div>
         <button type="submit" class="btn">提交评论</button>
       </form> 
     </section>
   </div>

   <footer class="footer">
     <div class="container">
       <p>&copy; 2023 我的个人博客. 保留所有权利.</p>
       <div class="social-links">
         <a href="#"><i class="fab fa-github"></i></a>
         <a href="#"><i class="fab fa-twitter"></i></a>
         <a href="#"><i class="fab fa-linkedin"></i></a>
       </div>
     </div>
   </footer>

   <button id="back-to-top" title="回到顶部">↑</button>

   <script src="js/script.js"></script>
 </body>
</html>